<template>
	<view class="content">
		<!-- <uni-steps :options="list1" active-color="#007AFF" :active="active" /> -->
		<view class="title">
			病历信息
		</view>
		<view class="status">
			<view class="one">
				出院状态选择
			</view>
			<view class="two">
				<text v-for="(item,value) in status.hList" class="first"  @click="alterStatus(value) " :style="{
					backgroundColor:status.sel==value?'#006eff':'',
					color:status.sel==value? '#fff' :''
				}">
					{{item.value}}
				</text>
			</view>
		</view>
		<view class="status">
			<view class="one">
				领取方式
			</view>
			<view class="two">
				<text  v-for="(item,value) in status.mList" class="first"  @click="alterMethod(value) " :style="{
									backgroundColor:status.none==value?'#006eff':'',
									color:status.none==value? '#fff' :''
								}">
									{{item.value}}
								</text>
			</view>
		</view>
		<view class="title">
			收件信息

		</view>
		<view class="status">
			<view id="inp">
				<text>姓名</text>
				<uni-easyinput focus v-model="personInfo.name" placeholder="请输入姓名"></uni-easyinput>
			</view>
		</view>
		<view class="status">
			<view id="inp">
				<text>手机号码</text>
				<uni-easyinput focus v-model="personInfo.phone" placeholder="请输入手机号码"></uni-easyinput>
			</view>

		</view>
		
			<view class="status">
				<view id="address">
					<text>选择城市</text>
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
					<text class="iconfont  icon-xiangyou1 " style="color:#afafaf;"></text>
				</view>
			</view>
		<view class="status">
			<view id="inp">
				<text>详细地址</text>
				<uni-easyinput focus v-model="personInfo.address" placeholder="请输入填写详细地址"></uni-easyinput>
			</view>
		</view>
	</view>
	<view class="btn">
			<button @click="go" type="primary" id="button">点击申请</button>
		
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,computed
	} from 'vue'
	import {addSendApi} from '@/api/nucleicAcidApi.js'
	let active = ref(0)
	let list1 = reactive([{
			title: '申请信息'
		},
		{
			title: '证件上传'
		},
		{
			title: '病历信息'
		}
	])
	let array = ref(['中国', '美国', '巴西', '日本'])
	let index=ref(0)
	computed(()=>{
		
	})
	let bindPickerChange = (e)=> {
		console.log('picker发送选择改变，携带值为', e.detail.value)
		index.value = e.detail.value
		console.log(index)
	}
	// 状态选择
	let status=reactive({
		sel:0,
		none:0,
		hList:[
			{value:'已出院',index:0},
			{value:'未出院',index:1}
		],
		mList:[
			{value:'邮寄',index:0},
			{value:'自取',index:1}
		]
	})
	let alterStatus=(value)=>{
		status.sel=value
	}
	let alterMethod=(value)=>{
		status.none=value
	}
	// 个人信息
	let personInfo=reactive({
		name:'',
		address:'',
		phone:'',
		city:'',
		dischargeStatus:0,
		 receiveManner:0,
	})
	let go = () => {
		uni.navigateTo({
			// url: `/pages/recordSend/uploading/uploading?ob=`+encodeURIComponent(JSON.stringify(personInfo))
			url:''
		})
	}
	addSendApi(personInfo)
</script>

<style lang="less">
	.btn {
		#button {
			margin: 80rpx 0;
			background-color: #007aff;
		}
	}

	.content {

		margin: 50rpx 30rpx;

		.title {
			color: #afafaf;
			font-size: 27rpx;
			margin: 40rpx 0;
		}

		.status {
			padding: 30rpx 0;
			line-height: 80rpx;
			border-top: 1px solid #f2f2f2;
			border-bottom: 1px solid #f2f2f2;
			font-size: 28rpx;

			#inp {
				display: flex;

				text {
					width: 200rpx;
				}
			}

			#address {
				display: flex;
				justify-content: space-between;
				padding-right: 30rpx;

			}

			.one {
				margin: 30rpx 0;
			}

			.two {
				margin: 30rpx 0;
				display: flex;

				.first {
					width: 120rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border-radius: 20rpx;
					margin-right: 30rpx;
					// color: #ffffff;
					// background-color: #006eff;
					background-color: #e4f0ff;
				}

				.second {
					width: 120rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 20rpx;
					margin-right: 30rpx;
					text-align: center;
					
				}
			}
		}
	}
</style>
